<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1">
  <title>Unique</title>
  <link rel="icon" href="favicon.png" type="image/png">
  <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
  <link href="css/animate.css" rel="stylesheet" type="text/css">
  <script src="https://kit.fontawesome.com/bf51975b7f.js" crossorigin="anonymous"></script>

  <!--[if lt IE 9]>
    <script src="js/respond-1.1.0.min.js"></script>
    <script src="js/html5shiv.js"></script>
    <script src="js/html5element.js"></script>
<![endif]-->

</head>

<body>

  <!--Header_section-->
  <header id="header_wrapper">
    <div class="container">
      <div class="header_box">
        <div class="logo"><a href="#"><img src="img/logo.png" alt="logo"></a></div>
        <nav class="navbar navbar-inverse" role="navigation">
          <div class="navbar-header">
            <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
              <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span
                class="icon-bar"></span> <span class="icon-bar"></span> </button>
          </div>
          <div id="main-nav" class="collapse navbar-collapse navStyle">
            <ul class="nav navbar-nav" id="mainNav">
              <li class="active"><a href="#hero_section" class="scroll-link">Home</a></li>
              <li><a href="#slides" class="scroll-link">NEWS</a></li>
              <li><a href="#explore" class="scroll-link">EXPLORE</a></li>
              <!-- <li><a href="#Portfolio" class="scroll-link">Portfolio</a></li> -->
              <!-- <li><a href="#clients" class="scroll-link">Clients</a></li> -->
              <li><a href="#Zone" class="scroll-link">Zone</a></li>
              <li><a href="#contact" class="scroll-link">Contact</a></li>
            </ul>
          </div>
        </nav>
      </div>
    </div>
  </header>
  <!--Header_section-->

  <!--Hero_Section-->
  <section id="hero_section" class="top_cont_outer">
    <div class="hero_wrapper">
      <div class="container">
        <div class="hero_section">
          <div class="row">
            <div class="col-lg-5 col-sm-7">
              <div class="top_left_cont zoomIn wow animated">
                <h2><strong>CSguide</strong><br /> Your <font color="#ff6741"><strong>personal</strong></font> tutor
                </h2>
                <h7><strong>“CSguide - 计算机学习资源知识百科”</strong>为浙江大学2022-2023秋冬学期软件工程管理课程第三小组课程项目，旨在为计算机知识学习者提供方便快捷的资源索引，愿
                  CSguide 能成为你求学路上的一盏明灯。</h7>
                <h6> </h6>
                <a href="#service" class="read_more2">开始探索</a>
              </div>
            </div>
            <div>
              <img width="400px" length="50%" src="img/微信图片_20221019201153.png" class="bannerImg zoomIn wow animated"
                alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--Hero_Section-->

  <section id="slides">
    <center>
      <div>
        <!-- <div style="min-height: 100px;"></div> -->
        <h2>What's New</h2>
        <div style="min-height: 30px;"></div>
        <div class="col-lg-12 wow fadeInLeft delay-06s">
          <ul class="slides">
            <input type="radio" id="control-1" name="control" checked>
            <input type="radio" id="control-2" name="control">
            <input type="radio" id="control-3" name="control">

            <li class="slide">1</li>
            <li class="slide">2</li>
            <li class="slide">3</li>

            <div class="controls-visible">
              <label for="control-1"></label>
              <label for="control-2"></label>
              <label for="control-3"></label>
            </div>
          </ul>
          <div style="min-height: 90px;"></div>
        </div>
      </div>
    </center>
  </section>

  <section id="explore">
    <!--Aboutus-->
    <div class="inner_wrapper">
      <div class="container">
        <h2>Explore</h2>
        <center>
          <div class="search-box">
            <input class="search-txt" type="text" name="" placeholder="Type to search...">
            <a class="search-btn" href="#">
              <i class="fa-sharp fa-solid fa-magnifying-glass"></i>
            </a>
          </div>
        </center>
        <div style="min-height: 40px;"></div>
        <!-- <div class="inner_section">
          <div class="row">
            <div class=" col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-right"><img src="img/about-img.jpg"
                class="img-circle delay-03s animated wow zoomIn" alt=""></div>
            <div class=" col-lg-7 col-md-7 col-sm-7 col-xs-12 pull-left">
              <div class=" delay-01s animated fadeInDown wow animated">
                <h3>Lorem Ipsum has been the industry's standard dummy text ever..</h3><br />
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                  scrambled it to make a type specimen book.PageMaker including versions of Lorem Ipsum.</p> <br />
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
                  industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
                  scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap
                  into electronic typesetting, remaining essentially unchanged like Aldus PageMaker including versions
                  of Lorem Ipsum.</p>
              </div>
              <div class="work_bottom"> <span>Want to know more..</span> <a href="#contact" class="contact_btn">Contact
                  Us</a> </div>
            </div>

          </div>
        </div> -->
        <div class="col-lg-12 wow fadeInLeft delay-06s">
          <center>
            <div class="result-box">

            </div>
          </center>
        </div>
      </div>
    </div>
  </section>
  <!--Aboutus-->


  <!--Service-->
  <section id="service">
    <div class="container">
      <h2>Services</h2>
      <div class="service_wrapper">
        <div class="row">
          <div class="col-lg-4">
            <div class="service_block">
              <div class="service_icon delay-03s animated wow  zoomIn"> <span><i class="fa fa-android"></i></span>
              </div>
              <h3 class="animated fadeInUp wow">Android</h3>
              <p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text.</p>
            </div>
          </div>
          <div class="col-lg-4 borderLeft">
            <div class="service_block">
              <div class="service_icon icon2  delay-03s animated wow zoomIn"> <span><i class="fa fa-apple"></i></span>
              </div>
              <h3 class="animated fadeInUp wow">Apple IOS</h3>
              <p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text.</p>
            </div>
          </div>
          <div class="col-lg-4 borderLeft">
            <div class="service_block">
              <div class="service_icon icon3  delay-03s animated wow zoomIn"> <span><i class="fa fa-html5"></i></span>
              </div>
              <h3 class="animated fadeInUp wow">Design</h3>
              <p class="animated fadeInDown wow">Lorem Ipsum is simply dummy text of the printing and typesetting
                industry. Lorem Ipsum has been the industry's standard dummy text.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!--Service-->

  <!--Footer-->
  <footer class="footer_wrapper" id="contact">
    <div class="container">
      <section class="page_section contact" id="contact">
        <div class="contact_section">
          <h2>Contact Us</h2>
          <div class="row">
            <div class="col-lg-4">

            </div>
            <div class="col-lg-4">

            </div>
            <div class="col-lg-4">

            </div>
          </div>
        </div>
        <div class="row">

          <div class="col-lg-12 wow fadeInLeft delay-06s">
            <div class="form">
              <input class="input-text" type="text" name="" value="Your Name *"
                onFocus="if(this.value==this.defaultValue)this.value='';"
                onBlur="if(this.value=='')this.value=this.defaultValue;">
              <input class="input-text" type="text" name="" value="Your E-mail *"
                onFocus="if(this.value==this.defaultValue)this.value='';"
                onBlur="if(this.value=='')this.value=this.defaultValue;">
              <textarea class="input-text text-area" cols="0" rows="0"
                onFocus="if(this.value==this.defaultValue)this.value='';"
                onBlur="if(this.value=='')this.value=this.defaultValue;">Your Message *</textarea>
              <input class="input-btn" type="submit" value="send message">
            </div>
          </div>

        </div>
      </section>
    </div>
    <div class="container">
      <div class="footer_bottom"><span>Copyright © 2014, Template by <a href="http://webthemez.com">WebThemez.com</a>.
        </span> </div>
    </div>
  </footer>

  <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
  <script type="text/javascript" src="js/jquery.nav.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/jquery.isotope.js"></script>
  <script type="text/javascript" src="js/wow.js"></script>
  <script type="text/javascript" src="js/custom.js"></script>

</body>

</html>